<template>
  <view class="detailContent">
    <view class="title">{{detailData.title}}</view>
    <view class="orgInfo">
      <view class="icon">
        <image :src="detailData.imgUrl"></image>
      </view>
      <view class="rightInfo">
        <view class="rightA address">
          <uni-icon type="location" color="#8f8f94" size="22"/>
          <text class='text'>{{detailData.address}}</text>
        </view>
        <view class="rightA seeNum">
          <uni-icon type="eye" color="#8f8f94" size="22"/>
          <text class='text'>{{detailData.seeNum}}</text>
        </view>
        <view class="rightA phoneNum">
          <uni-icon type="phone" color="#8f8f94" size="22"/>
          <text class='text'>{{detailData.phoneNum}}</text>
        </view>
      </view>
      <view class="phoneIcon">
        <uni-icon type="phone" color="#fff" size="24"/>
      </view>
    </view>
    <view class="toolBox">
      <view class="toolList" v-for='item,index in detailData.toolbar'>
        <uni-icon :type="item.icon" color="#8f8f94" size="22"/>
        <text class='toolItme'>{{item.name}}</text>
      </view>
    </view>
    <view class="otherList">
      <view class="otherListtitle">
        <view class="titleIcon">
          <uni-icon type="phone" color="#fff" size="14"/>
        </view>
        <text class='text'>附近交通</text>
      </view>
      <view class="contentText">
        <text>{{detailData.traffic}}</text>
      </view>
    </view>
    <view class="otherList otherPb">
      <view class="otherListtitle">
        <view class="titleIcon">
          <uni-icon type="phone" color="#fff" size="14"/>
        </view>
        <text class='text'>机构简介</text>
      </view>
      <view class="contentText" :class='moreShow? "contentTextShow":"contentTextFlow"'>
        <text>{{detailData.introduction}}</text>
      </view>
      <view class='seeMore' @click='_handleMore'>
        <view>查看更多</view>
        <view class="icon" :class='moreShow? "activeicon":""'></view>
      </view>
    </view>

    <view class="otherList">
      <view class="otherListtitle otherListComment" @click='schoolShow = !schoolShow'>
        <view class="commentL">
          <view class="titleIcon">
            <uni-icon type="phone" color="#fff" size="14"/>
          </view>
          <text class='text'>其他（）校区</text>
        </view>
        <view class="commentR">
          <view class="titleIcon">
            <uni-icon :type="schoolShow ? 'arrowdown':'arrowup'" color="#8f8f94" size="20"/>
          </view>
        </view>
      </view>
      <view class="schoolList" v-if='schoolShow'>
        <view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(value,key) in detailData.schoolList"
              :key="key">
          <view class="uni-list-cell-navigate uni-navigate-right uni-media-list ">
            <view class="uni-media-list-body">
              <view class="uni-media-list-text-top">
                <view>{{value.title}}</view>
                <view class="address">{{value.address}}</view>
              </view>
              <view class="uni-media-list-text-bottom me-ellipsis">{{value.content}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="otherList">
      <view class="otherListtitle otherListComment">
        <view class="commentL">
          <view class="titleIcon">
            <uni-icon type="phone" color="#fff" size="14"/>
          </view>
          <text class='text'>评论</text>
        </view>
        <view class="commentR">
          <text class='text'>人点评</text>
          <view class="titleIcon">
            <uni-icon type="compose" color="#dc5c05" size="20"/>
          </view>
        </view>
      </view>
      <comment :commentList='detailData.commentList'/>
    </view>
  </view>
</template>

<script>
  import payment from './payment'
  import comment from './comment'
  import uniIcon from '@/components/uni-icon/uni-icon.vue'

  export default {
    components: {payment, uniIcon,comment},
    props: {
      detailData: Object,
    },
    data() {
      return {
        schoolShow: false,
        moreShow: false
      }
    },
    methods: {
      _handleMore() {
        this.moreShow = !this.moreShow
      }
    }
  }
</script>

<style scoped lang=scss>
@import "../common/detail";
</style>
